
<!--
  功能：功能描述
  作者：kangjie
  邮箱：kangjie@briup.com
  时间：2021年12月20日 15:20:59
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="permes">
    <!-- 个人头像信息 -->
    <div class="perheader">
      <!-- 头像 -->
      <div class="demo-type" >
        <el-avatar
          :size="80"
          style="float: left;"
          @error="errorHandler"
        >
        <!-- <div></div> -->
          <img :src="this.user.userFace" @click="editProduct">
        </el-avatar>
      </div>
      <el-row :gutter="5" style="padding-top:50px">
        <el-col
          :span="5"
        ><div class="">
          <button
            style="
                  color: #ffffff;
                  border-color: none;
                  border-radios:6px;
                
                "
            class="blue"
            @click="editProduct"
          >
            修改头像
          </button>
        </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="头像修改"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      :model="imgFace"
    >
      <!-- 表单开始 一个页面多个表单  :rules="rules"-->
      <el-form :model="productForm">
        <el-form-item label="头像：">
          <el-upload
            class="avatar-uploader"
            :action="uploadFileURL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="imageUrl"
              :src="imageUrl"
              class="avatar"
            >
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 个人信息 -->
    <!-- x -->
    <div class="percontent" style="text-align: center">
      <div v-loading="loading" class="tableContent">
        <el-row :gutter="20">
          <el-col :span="10">
            <span style="float: left; font-size: 20px ;">基本信息</span>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col
            :span="10"
          ><div class="grid-content bg-purple">
            姓名：{{ this.user.realname }}
          </div></el-col>
          <el-col :span="10">
            <div v-if="this.user.gender=='female'" class="grid-content bg-purple">
              性别：女
            </div>
            <div v-else class="grid-content bg-purple">
              性别：男
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col
            :span="10"
          ><div class="grid-content bg-purple">
            用户名：{{ this.user.username }}
          </div></el-col>
          <el-col
            :span="10"
          ><div class="grid-content bg-purple">
            手机号：{{ this.user.telephone }}
          </div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col
            :span="10"
          ><div class="grid-content bg-purple">
            角色：{{ roles[0] }}
          </div></el-col>
          <el-col
            :span="10"
          ><div class="grid-content bg-purple">
            注册时间：{{ this.user.registerTime | fmtDate_global }}
          </div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col
            :span="10"
          ><div
             v-if="this.user.status == '正常'"
             class="grid-content bg-purple"
           >
             状态: <el-tag type="success">正常</el-tag>
           </div>
            <div v-else>状态: <el-tag type="danger">异常</el-tag></div>
          </el-col>
          <el-col
            :span="10"
          >
            <div v-if="this.user.email == ''" class="grid-content bg-purple">
              email: <el-tag type="info"> 暂无数据</el-tag>
            </div>
            <div v-else class="grid-content bg-purple">邮箱:{{ this.user.email }}</div>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="20">
          <el-col :span="10"> -->
            <div style=" box-shadow: 0 2px 0px rgba(0, 0, 0, 0.3);height:100px">
            <button
              class="push_button blue"
              style="float: left; font-size: 18px"
              @click="editProduct2(user)"
            >
              修改个人信息
            </button>
            </div>
            <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible">
              <el-form :model="productForm">
                <el-form-item label="用户名">
                  <el-input
                    v-model="productForm.username"
                    autocomplete="off"
                  />
                </el-form-item>
                <el-form-item label="真实姓名">
                  <el-input
                    v-model="productForm.realname"
                    autocomplete="off"
                  />
                </el-form-item>
                <el-form-item label="手机号">
                  <el-input
                    v-model="productForm.telephone"
                    autocomplete="off"
                  />
                </el-form-item>
                <el-form-item label="性别">
                  <el-radio-group v-model="productForm.gender">
                    <el-radio label="male">男</el-radio>
                    <el-radio label="female"> 女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="email">
                  <el-input
                    v-model="productForm.email"
                    autocomplete="off"
                  />
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="submitForm2">确 定</el-button>
              </div>
            </el-dialog>
          <!-- </el-col>
        </el-row> -->
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { get, post } from '@/utils/request'
import { log } from '@antv/g2plot/lib/utils'
export default {
  // 组件名称
  name: 'Demo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      dialogVisible: false,
      // 文件预览的路径     文件预览路径+文件id
      showFileURL: 'http://121.199.29.84:8888/group1/',
      // 项目基础路径和文件上传路径
      uploadFileURL: 'http://121.199.29.84:8001/file/upload',
      productForm: {},
      imageUrl: '',
      // dialogTitile: "",
      dialogFormVisible: false,
      radio: 1,
      loading: false,
      imgFace: ''
    }
  },
  // 计算属性
  computed: {
    ...mapState('user', ['user', 'roles'])
  },
  // 组件方法
  methods: {
    ...mapActions('user', ['getInfo']),
    errorHandler() {
      return true
    },
    // 图片上传之前做的处理
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.productForm.userFace = this.showFileURL + res.data.id
       console.log(this.productForm.userFace)
    },
    // 图片上传之前做的处理
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt3M = file.size / 1024 / 1024 < 3
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt3M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt3M
    },
    // 保存头像
    submitForm() {
      this.dialogVisible = false
      post('/baseUser/alterUserface', {
        id: this.user.id,
        userface: this.productForm.userFace
      }).then((res) => {
        if (res.status == 200) {
          location.reload()
          this.$message({
            title: '成功',
            message: res.message,
            type: 'success'
          })
          // this.getProductData();
          this.loading = false
          this.dialogVisible = false
        } else {
          this.$message({
            title: '失败',
            message: res.message,
            type: 'danger'
          })
        }
      })
    },
    submitForm2() {
      // console.log(this.productForm);
      this.dialogFormVisible = false
      post('/baseUser/saveOrUpdate', this.productForm).then((res) => {
        if (res.status == 200) {
          location.reload()
          this.$message({
            title: '成功',
            message: res.message,
            type: 'success'
          })
          this.getProductData()
          this.loading = false
          this.dialogVisible = false
        } else {
          this.$message({
            title: '失败',
            message: res.message,
            type: 'danger'
          })
        }
      })
    },
    // 修改图片
    editProduct(proObj) {
      this.productForm = {
        ...proObj
      }
      // this.imageUrl = this.productForm.userFace
      // console.log(this.productForm.userFace)
      // this.dialogTitile = "修改头像信息";
      this.dialogVisible = true
    },
    // 修改个人数据
    editProduct2(proObj) {
      this.productForm = {
        ...proObj
      }
      // this.imageUrl = this.productForm.userFace;
      // this.dialogTitile = "修改头像信息";
      this.dialogFormVisible = true
    },
    getProductData() {
      this.loading = true
    },
    handleClose() {
      // 清空表单的数据 和 验证信息
      this.$confirm('确认关闭？')
        // 确认按钮事件
        .then((_) => {
          this.dialogFormVisible = false
          this.dialogVisible = false
          done()
        })
        // 取消按钮事件
        .catch((_) => {})
    }
  },
  created() {
    this.getInfo()
    // console.log(this.user);
  }
}
</script>
<style scoped>
.perheader {
  /* background-color:#7cd3ff; */
  /* border-bottom: 1px solid #68bde7; */
  background-color: #fff;
  padding: 3px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  margin: 0 auto 10px;
  box-sizing: border-box;
  /* border-radius: 50% */
  /* color:; */
  /* text-align: center; */
  height: 100px;
}
.percontent {
  /* background-color:rgb(247, 11, 11); */
  /* color: #333; */
  /* text-align: center; */
  height: 400px;
  width: 100%;
}
.tableContent {
  height: 100px;
}
.el-row {
  margin-bottom: 20px;
}
.bg-purple {
  /* background: #aecbe9c4; */
  /* border-bottom: 2px solid #aecbe9c4; */
  width: 300px;
  float:right
}
.grid-content {
  padding: 10px;
  border-radius: 4px;
  min-height: 20px;
}
.avatar-uploader  {
  /* border: 1px dashed #8bb4db; */
  /* height: 100px; 注释*/
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/* .avatar-uploader .el-upload:hover {
  border-color: #409eff;
} */
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  /* height: 178px; */
  /* line-height: 178px; */
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.push_button {
  position: relative;
  width:150px;
  height:40px;
  text-align:center;
  color:#FFF;
  text-decoration:none;
  line-height:43px;
  font-family:'Oswald', Helvetica;
  display: block;
  margin: 30px;
}
.push_button:before {
  background:#f0f0f0;
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#f0f0f0));
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
  -moz-box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
  box-shadow:0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
  position: absolute;
  content: "";
  left: -6px; right: -6px;
  top: -6px; bottom: -10px;
  z-index: -1;
}
.push_button:active {
  -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
  top:5px;
}
.push_button:active:before{
  top: -11px;
  bottom: -5px;
  content: "";
}
.blue {
  text-shadow:-1px -1px 0#3589ddc4;
  background: #409effc4;
  border:1px solid #64b0fcc4;
  background-image:-webkit-linear-gradient(to top, #48C6D4, #3EACBA);
  background-image:-moz-linear-gradient(to top, #48C6D4, #3EACBA);
  background-image:-ms-linear-gradient(to top, #48C6D4, #3EACBA);
  background-image:-o-linear-gradient(to top, #48C6D4, #3EACBA);
  background-image:linear-gradient(to top, #48C6D4, #3EACBA);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
  -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
  box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 4px 0 #338A94, 0 4px 2px rgba(0, 0, 0, .5);
}
.blue:hover {
  background: #409effc4;
  background-image:-webkit-linear-gradient(to top, #3EACBA, #48C6D4);
  background-image:-moz-linear-gradient(to top, #3EACBA, #48C6D4);
  background-image:-ms-linear-gradient(to top, #3EACBA, #48C6D4);
  background-image:-o-linear-gradient(top, #3EACBA, #48C6D4);
  background-image:linear-gradient(to top, #3EACBA, #48C6D4);
}
</style>






